<template>
  <div>
    <el-form
      label-position="right"
      label-width="100px"
      :model="registerInfo"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="账号" prop="userName">
        <el-input v-model="registerInfo.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="registerInfo.password"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="registerInfo.nickName"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="register">注册</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue"
import { loginRules } from "../config/config"
import FormHandle from "@/hooks/formHandle"
import { ElForm } from "element-plus"
import Validate from "@/hooks/validate"
import { useStore } from "vuex"
type registerType = {
  userName: string
  password: string
  nickName: string
}

const store = useStore()
const ruleForm = ref<InstanceType<typeof ElForm>>()

const registerInfo: registerType = reactive({
  userName: "",
  password: "",
  nickName: ""
})

const rules = {
  ...loginRules,
  nickName: [
    {
      required: true,
      message: "请输入您的你昵称",
      trigger: "blur"
    },
    {
      min: 2,
      max: 25,
      message: "用户名应该在2到25位",
      trigger: "blur"
    }
  ]
}

//重置
const reset = () => FormHandle.formReset(registerInfo)
//注册
const register = async () => {
  const validRes = await Validate.formValidate(ruleForm.value!)
  if (validRes) {
    store.dispatch("user/userRegister", registerInfo)
  }
}
</script>
